import { ref, reactive, computed, watch } from 'vue';
import { defineStore } from 'pinia';
import { api } from "@/services/api";
import { useRoute } from 'vue-router';
import { useMenuStore } from '@/stores/menu';
import type { ArticleItem, LoadMoreParam, ArticleInfo } from '@/services/type';

export const useArticleStore = defineStore('article', () => {

    const route = useRoute();
    const menuStore = useMenuStore();
    
    // 文章数据
    const articleData = reactive<ArticleItem[]>([]);
    // 文章详情信息
    let articleInfo = ref<Partial<ArticleInfo>>({});
    // 当前文章的上一篇文章
    let onArticleInfo = ref<Partial<{wznm: string, title: string}>>();
    // 当前文章的下一篇文章
    let underArticleInfo = ref<Partial<{wznm: string, title: string}>>();
    // 加载参数
    const loadMoreParam = reactive<LoadMoreParam>({ loadName: "点击加载更多" });
    // 是否最后一页
    const isLast = ref(false);
    // 游标值
    const cursor = ref('');
    // 初始化正在加载中
    const loading = ref(true);
    // 切换类名
    const whichClass = reactive({
        praise : {
            className: "",
            flag: false
        }, 
        collect : {
            className: "",
            flag: false
        }, 
        comment : {
            className: "",
            flag: false
        }
    });

    // 获取当前菜单信息
    const currentMenu = computed(() => menuStore.menuData.find(item => item.menu_url == '/' + route.name?.toString()));

    // 监听当前菜单信息是否变化
    watch(currentMenu, async (data) => {
        // 如果菜单信息有变化，并且当前菜单属于专栏，则允许初始化文章信息
        if((data && data.is_allow_query)) {
            // 初始化数据
            initParam();
            // 获取文章列表
            await getArticleList({columnId: data?.menu_id});
        }
    })

    /**
     * 初始化参数
     */
    const initParam = () => {
        articleData.length = 0;
        loadMoreParam.loadName = "点击加载更多";
        loadMoreParam.disabled = false;
        loading.value = true;
        isLast.value = false;
        cursor.value = '';
    }

    /**
     * 获取文章信息
     * @param p 
     */
    const getArticleList= async (data: { p?: string | null, columnId?: number }) => {
        let param: any = {
            /** 搜索标题 */
            title: data.p,
            /** 栏目编号 */
            columnId: data.columnId,
            /** 游标值 */
            cursor: cursor.value,
            /** 分页数量 */
            pageSize: 10
        }
        // 获取文章列表信息
        const response = await api.article.getArticleList(param);
        // 如果状态返回失败, 退出方法
        if(response.code !== 0) return; 
        // 结果赋值
        articleData.push(...response.data.list);
        // 是否最后一页
        isLast.value = response.data.isLast;
        // 游标值
        cursor.value = response.data.cursor;
        // 如果是最后一页
        if(isLast.value) {
            loadMoreParam.loadName = "已经到底了";
            loadMoreParam.disabled = true;
        }
        loadMoreParam.loading = false;
        // 加载结束
        loading.value = false;
    }

    /**
     * 加载文章数据事件
     * @param p 搜索标题
     * @param columnId 栏目编号
     */
    const loadMore = async (p?: string | null) => {
        loadMoreParam.loading = true;
        loadMoreParam.loadName = "加载中...";
        // 栏目ID
        let columnId: number | undefined;
        // 是否存在菜单信息
        if(currentMenu.value) {
            // 栏目ID赋值
            columnId = currentMenu.value.menu_id;
        }
        // 获取文章信息
        await getArticleList({p, columnId});
    }

    /**
     * 获取文章详情信息
     * @param wznm 
     */
    const getArticleInfo = async (wznm: string) => {
        // 获取文章详情信息
        const response = await api.article.getArticleInfo({ wznm });
        // 如果状态返回失败, 退出方法
        if(response.code !== 0) return; 
        // 文章详细信息赋值
        articleInfo.value = response.data;
        // 查询
        if(articleInfo.value.id && articleInfo.value.columnId) {
            // 查询当前文章的上一篇文章
            getOnArticle(articleInfo.value.id, articleInfo.value.columnId);
            // 查询当前文章的下一篇文章
            getUnderArticle(articleInfo.value.id, articleInfo.value.columnId);
        } 
        // 评论数
        if(articleInfo.value.postNum && articleInfo.value.postNum > 0) {
            whichClass.comment.className = "count"; 
        }
        // 点赞数
        if(articleInfo.value.giveLikeNum && articleInfo.value.giveLikeNum > 0) { 
            whichClass.praise.className = "count"; 
        }
        // 收藏数
        if(articleInfo.value.collectNum && articleInfo.value.collectNum > 0) { 
            whichClass.collect.className = "count"; 
        }
        // 用户是否已点赞
        if(articleInfo.value.is_give_like && articleInfo.value.is_give_like > 0) {
            whichClass.praise.className = "count active";
            whichClass.praise.flag = true;
        }
        // 用户是否已收藏
        if(articleInfo.value.is_collect && articleInfo.value.is_collect > 0) {
            whichClass.collect.className = "count active";
            whichClass.collect.flag = true;
        }
    }

    // 查询当前文章的上一篇文章
    const getOnArticle = async (id: number, columnId: number) => {
        const response = await api.article.getOnArticle({ id, columnId });
        // 如果状态返回失败, 退出方法
        if(response.code !== 0) return; 
        // 赋值
        onArticleInfo.value = response.data;
    }

    // 查询当前文章的下一篇文章
    const getUnderArticle = async (id: number, columnId: number) => {
        const response = await api.article.getUnderArticle({ id, columnId });
        // 如果状态返回失败, 退出方法
        if(response.code !== 0) return; 
        // 赋值
        underArticleInfo.value = response.data;
    }

    return { 
        loadMoreParam, 
        loading, 
        whichClass,
        articleData, 
        articleInfo,
        onArticleInfo,
        underArticleInfo,
        initParam, 
        getArticleList, 
        loadMore,
        getArticleInfo
    };
});